<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task07</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
    <div class="left-header">
        <p class="title">新世界</p>
        <div class="bar"></div>
    </div>
    <nav class="right-header">
        <ul>
            <li><a class="selected" href="#">首页</a></li>
            <li><a href="#">最新活动</a></li>
            <li><a href="#">项目介绍</a></li>
            <li><a href="#">爱心社区</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">登录</a></li>
        </ul>
    </nav>
</header>
<div class="main-content">
    <section class="screen">
        <div class="mask"></div>
        <div class="new-life">
            <p class="theme">Time of new life</p>
            <p class="zh-theme">新时代, 年轻的人们让我们一起<br />体验新生活, 享受新生活</p>
            <div class="enter-button">开始体验</div>
        </div>
    </section>
    <section class="items">
        <div class="item">
            <div class="round icon"></div>
            <div class="words-wrapper">
                <p class="words">打造全新世界观, 让你更爱你的生活</p>
            </div>
        </div>
        <div class="item">
            <div class="flag icon"></div>
            <div class="words-wrapper">
                <p class="words">丰富多彩的公益活动, 发挥新世界的主人公意识</p>
            </div>
        </div>
        <div class="item">
            <div class="flower icon"></div>
            <div class="words-wrapper">
                <p class="words">时尚的新理念, 超前体验未知的生活</p>
            </div>
        </div>
        <div class="item">
            <div class="rect icon"></div>
            <div>
                <p class="words">完善的培养机制, 培养你全新的世界观</p>
            </div>
        </div>
    </section>
    <section class="activity">
        <section class="activity-title">
            <div class="book-icon"></div>
            <p class="book-words">关于新世界, 你不知道的还有什么 ?</p>
        </section>
        <section class="activity-info">
            <div class="info-words">
                <div class="words-wrapper">
                    <p>查找新世界城市活动信息</p>
                    <div class="bar"></div>
                    <p class="content">每个城市有不同的活动信息, 请自主查询您所需要了解的城市</p>
                </div>
                <ul class="search-box">
                    <li class="search-item">
                        <p class="choose">中国</p>
                        <span class="envelope"></span>
                    </li>
                    <li class="selected search-item">
                        <p class="choose">省份</p>
                        <span class="envelope"></span>
                        <ul class="child-item province">
                            <li class="selected">
                                <span class="list-item"></span>
                                <p>北京市</p>
                            </li>
                            <li>
                                <span class="list-item"></span>
                                <p>天津市</p>
                            </li>
                            <li>
                                <span class="list-item"></span>
                                <p>河北省</p>
                            </li>
                            <li>
                                <span class="list-item"></span>
                                <p>陕西省</p>
                            </li>
                            <li>
                                <span class="list-item"></span>
                                <p>内蒙古自治区</p>
                            </li>
                            <li>
                                <span class="list-item"></span>
                                <p>辽宁省</p>
                            </li>
                        </ul>
                    </li>
                    <li class="search-item">
                        <p class="choose">城市</p>
                        <span class="envelope"></span>
                    </li>
                    <li class="search-item">
                        <p class="choose">搜 索</p>
                    </li>
                </ul>
            </div>
            <div class="mask info"></div>
        </section>
        <section class="activity-place">
            <figure class="place">
                <figcaption class="big"><span>北 京 活 动</span>新社区联盟</figcaption>
                <div class="activity-poster beijing"></div>
                <figcaption class="small"><span>北京活动</span>新社区联盟</figcaption>
            </figure>
            <figure class="place selected">
                <figcaption class="big"><span>上 海 活 动</span>夜上海新景观探索</figcaption>
                <div class="activity-poster shanghai"></div>
                <figcaption class="small"><span>上海活动</span>夜上海新景观探索</figcaption>
            </figure>
            <figure class="place">
                <figcaption class="big"><span>深 圳 活 动</span>全新海岸线观点站</figcaption>
                <div class="activity-poster shenzhen"></div>
                <figcaption class="small"><span>深圳活动</span>全新海岸线观点站</figcaption>
            </figure>
            <figure class="place">
                <figcaption class="big"><span>香 港 活 动</span>奢侈消费大派送</figcaption>
                <div class="activity-poster hongkong"></div>
                <figcaption class="small"><span>香港活动</span>奢侈消费大派送</figcaption>
            </figure>
        </section>
        <section class="activity-detail">
            <div class="poster">
                <div class="poster-content">
                    <p class="new-world">新世界</p>
                    <p class="time">TIME</p>
                    <p class="footer">@新世界-北京</p>
                    <p class="footer">2016.04.01</p>
                </div>
                <div class="triangle"></div>
            </div>
            <div class="activity-content">
                <p class="title">新世界／<span>01</span></p>
                <p class="content">新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
                <div class="button">更多详情</div>
                <ul>
                    <li class="selected"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </section>
        <section class="more-info">
            <div class="less red">
                <p>新时代</p>
                <p>关于爱生活的我们</p>
                <div class="bar"></div>
                <div class="button white">查看更多</div>
            </div>
            <div class="less black">
                <p>新时代</p>
                <p>关于爱生活的我们</p>
                <div class="bar"></div>
                <div class="button red-btn">查看更多</div>
            </div>
            <div class="more photo">
                <div class="triangle reverse"></div>
                <div class="mask darker"></div>
            </div>
        </section>
        <section class="volunteer">
            <div class="intro">
                <p class="title">成为我们的志愿者</p>
                <div class="bar"></div>
                <p>新世界的大家庭需要每个爱生活的人的加入, 如果你够年轻, 有梦想, 有激情</p>
                <p>那就不要犹豫, 快来加入我们, 成为改变所有人生活的人</p>
            </div>
            <div class="join-us">
                <div class="announce">
                    <p class="name">新世界志愿者协议</p>
                    <p class="a-content">
                        加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规, 并且本着平等自愿的原则...
                        <span><i class="glyphicon glyphicon-chevron-down"></i>more</span>
                    </p>
                    <p class="name">新世界志愿者权利</p>
                    <p class="a-content">
                        新世界志愿者享受新世界内部所有资源共享的权利, 并享受所在地新世界活动的优先参与资格...
                        <span><i class="glyphicon glyphicon-chevron-down"></i>more</span>
                    </p>
                    <p class="name">更多条款</p>
                    <p class="a-content">
                        <span><i class="glyphicon glyphicon-chevron-down"></i>more</span>
                    </p>
                </div>
                <div class="join-table">
                    <form method="">
                        <input class="odd" type="text" placeholder="姓名:">
                        <input class="even" type="text" placeholder="年龄:">
                        <br/>
                        <input type="text" placeholder="联系方式:">
                        <input type="text" placeholder="联系地址:">
                        <textarea placeholder="请简单描述您梦想的生活:"></textarea>
                        <div class="submit">提交申请</div>
                    </form>
                </div>
            </div>
        </section>
    </section>
</div>
<footer>
    <p class="contact">联系我们</p>
    <p class="small">为了更好的获取我们最新的产品资讯, 您可以留下您的电子邮箱快速订阅我们的产品资讯</p>
    <p class="small">也可以通过以下任何方式关注我们的动态</p>
    <div class="email">
        <input type="text" placeholder="someone@email.com"><span>提交</span>
    </div>
    <ul>
        <li class="qq"></li>
        <li class="weibo"></li>
        <li class="skype"></li>
        <li class="internet"></li>
    </ul>
    <div class="footer">
        <p class="left">@新世界</p>
        <a class="right" href="#">Back to top</a>
    </div>
</footer>
</body>
</html>